<template>
  <div>
    <el-dialog v-model="showDialog" title="颁发勋章" width="500px" :before-close="cancel" @open="openDialog">
    <div v-loading="loading">
      <el-radio-group v-model="normalMedalId">
        <el-radio v-for="item in normalMedalIdList" :key="item.id" :label="item.id">{{item.medalName}}</el-radio>
      </el-radio-group>
       <el-checkbox-group v-model="check">
        <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{
          item.medalName
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
     
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="setAwardMedal">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import integralApi from "@/api/integralApi.js";
import type { FormInstance, FormRules } from "element-plus";
const props = defineProps({
  showDialog: Boolean,
  userId: {
    required: true,
    type: String,
    defautl: '',
  },
});
const { userId, showDialog } = toRefs(props)
const loading = ref(false)
const check = ref([]);
const checkList = ref([] as any);
const normalMedalId = ref(13)
const normalMedalIdList = ref([] as any)
watch(
  () => userId.value,
  (userId) => {
    if(userId) {
      normalMedalId.value = 13
      getUserMedals()
    }
  }
)


// 获取已有勋章
const getUserMedals = async()=> {
  console.log('[ 请求数据 ]', )
  loading.value = true
  let rs = await integralApi.getUserMedals({id: userId.value})
  if(rs.code === 200) {
    console.log('[ rs.payload.medalIds ]', rs.payload.medalIds)
    check.value = rs.payload.medalIds

    normalMedalId.value = rs.payload.normalMedalId
    
    // normalMedalId.value = rs.payload.normalMedalIdList
  }
  setTimeout(() => {
    loading.value = false
  }, 200);
}


// 颁发勋章
const setAwardMedal = async()=> {
  let params = {
    userId: userId.value, 
    medalIds: check.value,
    normalMedalId: normalMedalId.value
  }
  let rs = await integralApi.setAwardMedal(params)
  if(rs.code === 200) {
    ElMessage({
        message: '颁发勋章成功',
        type: 'success',
    })
    confirm();
  }
}


// 获取所有自定义勋章
const getPageMedal = async()=> {
  if(checkList.value.length) {
    return
  }
  let parmas = {
    status: 1,
    type: 1,
    currentPage: 1,
    showCount: -1,
    category: "",
  }
  console.log('[ getPageMedal ]', )
  let rs = await integralApi.getPageMedal(parmas)
  if(rs.code === 200) {
    checkList.value = rs.payload
  }
}
// 获取所有阶段勋章
const getPageMedalPhase = async()=> {
  if(normalMedalIdList.value.length) {
    return
  }
  let parmas = {
    status: 1,
    type: 2,
    currentPage: 1,
    showCount: -1,
    category: "3",
  }
  console.log('[ getPageMedalPhase ]', )
  let rs = await integralApi.getPageMedal(parmas)
  if(rs.code === 200) {
    normalMedalIdList.value = rs.payload
  }
}

const openDialog = async() => {
  await getPageMedal()
  await getPageMedalPhase()
}

const confirm = () => {
  emit("confirm");
  cancel();
};

const cancel = () => {
  // normalMedalId.value = 13
  emit("cancel");
};
const emit = defineEmits(["confirm", "cancel"]);

</script>

<style lang="scss" scoped></style>
